<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">和风天气</block>
    </cu-custom>

    <view class="wrap">
      <!-- 查询系列 -->
      <view class="cu-bar search bg-white">
        <view class="search-left">
          <u-search
            class="search-width"
            shape="round"
            placeholder="模糊搜索需要查询的地区"
            v-model="name"
            :show-action="false"
            @clear="searchCityInfo"
            @custom="searchCityInfo"
            @search="searchCityInfo"
          ></u-search>
        </view>
        <view class="action">
          <text @tap="areaShow = true">{{ areaName }}</text>
          <text class="cuIcon-triangledownfill"></text>
        </view>
      </view>

      <!-- 城市地区选择器 -->
      <u-picker
        :title="title"
        mode="selector"
        v-model="areaShow"
        :range="areas"
        range-key="label"
        @confirm="areaConfirm"
        :default-selector="selArea"
      ></u-picker>

      <view class="u-flex u-row-center">
        <u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="false">
          <u-dropdown-item
            @change="searchCityInfo"
            title="查询类型"
            v-model="typeId"
            :options="types"
          ></u-dropdown-item>
        </u-dropdown>
      </view>

      <!-- 按钮展示 -->
      <view class="top u-flex u-flex-nowrap">
        <u-link class="cu-btn round line-green url-link" :href="fxLink" :under-line="false" color="#39b54a">
          前往官方
        </u-link>
      </view>

      <!-- 天气展示 -->
      <scroll-view scroll-y class="sv" :style="{ height: navHeight + 'px' }">
        <view class="page-box">
          <view v-for="(item, index) in dataList" :key="item.id" :index="index">
            <!-- 7日天气信息 -->
            <view class="order" v-if="typeId === 1">
              <view class="order-item">
                <view class="left title-wrap">
                  <view class="title">日期: {{ item.fxDate }}</view>

                  <view class="content">
                    <view class="other-type">白天天气: {{ item.textDay }}</view>
                    <view class="other-type">晚上天气: {{ item.textNight }}</view>
                    <view class="other-type">温度: {{ item.tempMin }}° => {{ item.tempMax }}°</view>
                    <view class="other-type">日出日落: {{ item.sunrise }} => {{ item.sunset }}</view>
                    <view class="other-type">月出月落: {{ item.moonrise }}° => {{ item.moonset }}</view>
                    <view class="other-type">月相: {{ item.moonPhase }}</view>
                    <view class="other-type" v-if="item.viewcip">当天总降水量: {{ item.viewcip }}</view>
                    <view class="other-type">紫外线强度指数: {{ item.uvIndex }}</view>
                    <view class="other-type">相对湿度: {{ item.humidity }}%</view>
                    <view class="other-type" v-if="item.viewssure">大气压强(百帕): {{ item.viewssure }}</view>
                    <view class="other-type">能见度: {{ item.vis }}公里</view>
                    <view class="other-type">白天风向360角度: {{ item.wind360Day }}</view>
                    <view class="other-type">白天风向: {{ item.windDirDay }}</view>
                    <view class="other-type">白天风力等级: {{ item.windScaleDay }}</view>
                    <view class="other-type">白天风速: {{ item.windSpeedDay }}公里/小时</view>
                    <view class="other-type">晚上风向360角度: {{ item.wind360Night }}</view>
                    <view class="other-type">晚上风向: {{ item.windDirNight }}</view>
                    <view class="other-type">晚上风力等级: {{ item.windScaleNight }}</view>
                    <view class="other-type">晚上风速: {{ item.windSpeedNight }}公里/小时</view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 当前预警信息 -->
            <view class="order" v-if="typeId === 2">
              <view class="order-item">
                <view class="left title-wrap">
                  <view v-if="item.severityColor === 'Blue'" class="title">发布时间: {{ item.pubTime }}</view>
                  <view v-else-if="item.severityColor === 'Yellow'" class="yellow-title">
                    发布时间: {{ item.pubTime }}
                  </view>
                  <view v-else-if="item.severityColor === 'Orange'" class="orange-title">
                    发布时间: {{ item.pubTime }}
                  </view>
                  <view v-else-if="item.severityColor === 'Red'" class="red-title">发布时间: {{ item.pubTime }}</view>
                  <view v-else class="other-title">发布时间: {{ item.pubTime }}</view>

                  <view class="content">
                    <view class="other-type">预警发布单位: {{ item.sender }}</view>
                    <view class="bold-type">标题: {{ item.title }}</view>
                    <view class="other-type">预警类型名称: {{ item.typeName }}</view>
                    <view class="other-type">预警开始时间: {{ item.startTime }}</view>
                    <view class="other-type">预警开始时间: {{ item.endTime }}</view>
                    <view class="other-type">发布状态: {{ item.status }}</view>
                    <view class="other-type">严重等级: {{ item.severity }}</view>
                    <view v-if="item.urgency" class="other-type">紧迫程度: {{ item.urgency }}</view>
                    <view v-if="item.certainty" class="other-type">确定性: {{ item.certainty }}</view>
                    <view class="bold-type">{{ item.text }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pH: 0, //窗口高度
      navHeight: 0, //元素的所需高度
      areaShow: false,
      areaName: '无',
      selArea: [0],
      areas: [
        {
          label: '无',
          value: '0'
        }
      ],
      location: null,
      title: '请先搜索',
      name: '',
      options: [
        {
          text: '详情',
          style: {
            backgroundColor: '#007aff'
          }
        }
      ],
      fxLink: 'https://www.qweather.com/',
      dataList: [],
      activeColor: '#19be6b',
      mask: true,
      typeId: 1,
      types: [
        {
          label: '7日天气信息',
          value: 1
        },
        {
          label: '当前天气预警',
          value: 2
        }
      ]
    }
  },
  onShow() {},
  onReady() {
    // 动态获取剩余的高度
    var that = this
    uni.getSystemInfo({
      success: function (res) {
        that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
        let titleH = uni.createSelectorQuery().select('.sv') //想要获取高度的元素名（class/id）
        titleH
          .boundingClientRect((data) => {
            let pH = that._data.pH
            that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          })
          .exec()
      }
    })
  },
  methods: {
    /**
     * 获取地址信息查询城市信息
     * @param {Object} params
     */
    async getAddr(params) {
      const res = await this.$u.api.getAddr(params)
      if (res) {
        if (res.district && res.district !== 'undefined') {
          this.name = res.district
          this.searchCityInfo()
          return
        }
        this.name = res.city
        this.searchCityInfo()
      }
    },
    /**
     * 查询城市信息
     */
    async searchCityInfo() {
      this.dataList = []

      let params = {
        adm: '',
        location: this.name
      }
      const res = await this.$u.api.getCityInfo(params)
      let data = JSON.parse(JSON.stringify(res))

      this.areas = []
      data.forEach((item, index) => {
        let dat = {
          label: item.name,
          value: item.id
        }

        this.areas.push(dat)

        this.title = '城市地区'
        if (index == 0) {
          this.areaName = item.name
          this.location = item.id
        }
      })

      // 值存在直接查询天气信息
      if (this.areaName && this.location) {
        if (this.typeId === 1) {
          this.searchSevenDayWeatherInfo()
        } else if (this.typeId === 2) {
          this.searchWeatherWarningInfo()
        }
      }
    },
    /**
     * 查询7日的天气
     */
    async searchSevenDayWeatherInfo() {
      let params = {
        type: null,
        location: this.location
      }
      const res = await this.$u.api.getSevenDayWeatherInfo(params)
      let data = JSON.parse(JSON.stringify(res))

      this.fxLink = data.fxLink
      this.dataList = data.daily
    },
    /**
     * 获取当天天气预警
     */
    async searchWeatherWarningInfo() {
      let params = {
        type: null,
        location: this.location
      }
      const res = await this.$u.api.getWeatherWarningInfo(params)
      let data = JSON.parse(JSON.stringify(res))

      this.fxLink = data.fxLink
      this.dataList = data.warning
    },
    areaConfirm(e) {
      let index = e[0]
      let data = JSON.parse(JSON.stringify(this.areas[index]))

      this.location = data.value
      this.areaName = data.label
      this.selArea[0] = index

      this.searchSevenDayWeatherInfo()
    },
    goToTap() {
      console.log(111111)
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  font-size: 25rpx;
  margin: 20rpx 0;
  justify-content: center;

  .url-link {
    justify-content: center;
    width: 710rpx;
  }
}

.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;

  .order-item {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        color: $u-type-primary;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }

      .other-title {
        color: $u-tips-color;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }

      .red-title {
        color: $u-type-error;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }

      .yellow-title {
        color: #fbbd08;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }

      .orange-title {
        color: #f37b1d;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }
    }

    .content {
      .type {
        margin: 10rpx 0;
        font-size: 30rpx;
        color: $u-type-primary;
      }

      .other-type {
        margin: 10rpx 0;
        font-size: 24rpx;
      }

      .bold-type {
        margin: 10rpx 0;
        font-size: 24rpx;
        font-weight: bold;
      }
    }
  }
}

.search-left {
  margin: 0 auto;
  width: 550rpx;

  .search-width {
  }
}

.swipe-right-item-blue {
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 250rpx;
  background-color: #007aff;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}
</style>
